<template lang="html">
  <div class="content-container task-record-container">
    <div class="content-condition filter searchBox" id="filterId">
      <div class="filterBtn">
        <el-button type='primary' @click="searchFun" :icon="Search">搜索</el-button>
        <el-button type="danger" @click="resetSearchData" :icon="RefreshRight">重置</el-button>
      </div>

      <el-select v-model="searchData.taskCenterCategory" style="width: 130px" placeholder="任务中心类型" clearable>
        <el-option v-for="item in options.taskCenterCategorySelector" :key="item.value" :label="item.label"
          :value="item.value"></el-option>
      </el-select>

      <el-input v-model="searchData.searchText" :clearable="true" placeholder="任务编号/菜单路径" style="width: 180px">
      </el-input>

    </div>
    <!--表格-->
    <div class="table content-condition">
      <common-table :isShowLoading="tableData.poolIsShowLoading" :tableId="tableData.tableId"
        :columns="tableData.columns" emptyText="没有找到数据" :data="tableData.datas" :tableType="tableData.tableType"
        :pager="tableData.pager" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"
        @handleSelectionChange="handleSelectionChange" @handleExpandChange="handleExpandChange" :rowkey="'id'"
        :expandRowKeys="tableData.expandRowKeys" ref="table">
        <template v-slot:table_checkbox>
          <el-table-column type="selection" align="center" width="55" fixed="left"></el-table-column>
        </template>
        <template #bookSlot="slotData">
          <el-row class="bookMgr-book-info">
            <el-col :span="8" class="bookMgr-book-img-box">
              <el-image :src="slotData.scope.row.coverPicture" class="book-img" :lazy="true" />
            </el-col>
            <el-col :span="16" class="bookMgr-book-base-info">
              <div class="title">{{ slotData.scope.row.title }}</div>
              <div class="author">{{ slotData.scope.row.author }}</div>
            </el-col>
          </el-row>
        </template>
        <template #descSlot="slotData">
          <div class="bookMgr-book-desc">{{ slotData.scope.row.description }}</div>
        </template>
        <template #operationSlot="slotData">
          <Button :book="slotData.scope.row"></Button>
        </template>
      </common-table>
    </div>
  </div>
</template>
<script setup lang="js">
import { onMounted, ref, inject, provide } from 'vue';
import { getTaskCenterRecordList as getPageList } from '@/api/taskCenter';
import _ from 'lodash';

const { getMultiSelectOptions, selectNames } = inject('selectCollection');

const initSearchData = () => {
  return {
    taskCenterCategory: null,
    sourceText: null,
    pageIndex: 0,
    pageSize: 20,
  };
};

const searchData = ref(initSearchData());

const options = ref({
  taskCenterCategorySelector: [],
});


const tableData = ref({
  tableId: 'taskRecordTable',
  tableType: ["table"], //table-表格 dualCard-双卡片 其它-单卡片
  columns: [
    {
      prop: "taskCenterSettingsId",
      label: "任务编号",
      width: "180",
      align: "left",
      sortable: false,
      show: true
    },
    {
      prop: "category",
      label: "任务类型",
      width: "80",
      align: "left",
      sortable: false,
      formatter: function (row) {
        return row.categoryDesc;
      },
      show: true
    },

    {
      prop: "status",
      label: "任务状态",
      width: "80",
      align: "left",
      sortable: false,
      formatter: function (row) {
        return row.statusDesc;
      },
      show: true
    },
    {
      prop: "menuPath",
      label: "菜单路径",
      width: "200",
      align: "left",
      sortable: false,
      show: true
    },
    {
      prop: "resultMessage",
      label: "执行结果",
      width: "100",
      align: "left",
      sortable: false,
      show: true
    },

    {
      prop: "excuteBeginDatetime",
      label: "任务开始时间",
      width: "180",
      align: "left",
      sortable: false,
      show: true
    },

    {
      prop: "excuteEndDatetime",
      label: "任务结束时间",
      width: "180",
      align: "left",
      sortable: false,
      show: true
    },
    {
      prop: "createDateTime",
      label: "创建任务时间",
      width: "180",
      align: "left",
      sortable: false,
      show: true
    }
  ],
  datas: [],
  pager: {
    //分页栏信息
    pageNo: 1, //第几页
    limit: 20, //每页记录数
    sizes: [10, 20, 50, 200],
    total: 0, //总记录数
    isShow: true //是否显示
  },
  expandRowKeys: [],
  selectedRows: [],
  poolIsShowLoading: false,
});

// Methods
/**
 * 搜索
 */
function searchFun() {
  // 这里可以添加搜索逻辑
  console.log('搜索条件:', searchData.value);
  tableData.value.poolIsShowLoading = true;
  getDataFun();
}

/**
 * 重置
 */
function resetSearchData() {
  Object.assign(searchData.value, initSearchData());
  searchFun();
}

/**
 * 获取数据
 */
const getDataFun = _.debounce(() => {
  let params = Object.assign({}, searchData.value);
  getPageList(params).then((res) => {
    tableData.value.datas = res.data.data;
    tableData.value.pager = {
      total: res.data.records,
      limit: res.data.pageSize,
      pageNo: res.data.pageIndex + 1
    };
  }).finally(() => {
    tableData.value.poolIsShowLoading = false;
  });
}, 300);

/**
 * 改变页码
 * @param pageNo 当前页码
 */
function handleCurrentChange(pageNo) {
  searchData.value.pageIndex = pageNo;
  searchFun();
}

/**
 * 改变每页记录数
 * @param pageSize 每页记录数
 */
function handleSizeChange(pageSize) {
  searchData.value.pageSize = pageSize;
  searchFun();
}

/**
 * 处理选中行变化
 * @param selection 选中行数据
 */
function handleSelectionChange(selection) {
  tableData.value.selectedRows = selection;
}


/**
 * 初始化选项数据
 */
function initOptions() {
  const keys = [selectNames.taskCenterCategoryEnum];
  getMultiSelectOptions(...keys).then((res) => {
    options.value.taskCenterCategorySelector = res.getOptions(selectNames.taskCenterCategoryEnum);
  });
}

onMounted(() => {
  initOptions();
  searchFun();
});


</script>
<style lang="less"></style>
